<!--
 * hi-empty - 内容为空
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="hi-empty" :class="_classes" :style="_styles">
        <!-- 图标 -->
        <hi-icon class="hi-empty__icon" :name="icon" :mode="mode"></hi-icon>

        <!-- 文字 -->
        <text class="hi-empty__tips" v-if="tips">{{ tips }}</text>

        <!-- 按钮 -->
        <slot name="button">
            <hi-button
                :text="btnText"
                :width="btnWidth"
                :height="btnHeight"
                :bg="btnBg"
                :color="btnColor"
                :fontSize="btnFontSize"
                :radius="btnRadius"
                :theme="btnTheme"
                v-bind="btnOpts"
                class="hi-empty__button"
                v-if="showBtn"
                @click="_emits('click')"
            ></hi-button>
        </slot>
    </view>
</template>

<!-- 由于 HbuilderX 不支持 defineOptions() 写法，故只能在此处进行配置 -->
<script>
    export default { options: uni?.$hi?.config?.componentsOptions || {} };
</script>

<script setup>
    import { computed } from "vue";
    import props from "./props.js";

    // 组件属性
    const _props = defineProps(props);

    // 组件事件
    const _emits = defineEmits(["click"]);

    // 组件类名
    const _classes = computed(() => {
        const classes = [];
        return classes;
    });

    // 组件样式
    const _styles = computed(() => {
        const styles = [];

        // 高
        if (_props.height) styles.push(`--hi-empty-height: ${_props.height}`);

        // 背景
        if (_props.bg) styles.push(`--hi-empty-background: ${_props.bg}`);

        // 圆角
        if (_props.radius) styles.push(`--hi-empty-border-radius: ${_props.radius}`);

        // 文字颜色
        if (_props.color) styles.push(`--hi-empty-color: ${_props.color}`);

        // 文字大小
        if (_props.fontSize) styles.push(`--hi-empty-font-size: ${_props.fontSize}`);

        // 图标颜色
        if (_props.iconColor) styles.push(`--hi-empty-icon-color: ${_props.iconColor}`);

        // 图标大小
        if (_props.iconSize) styles.push(`--hi-empty-icon-font-size: ${_props.iconSize}`);

        // 按钮距离上方元素的距离
        if (_props.btnTop) styles.push(`--hi-empty-button-top: ${_props.btnTop}`);

        return styles;
    });
</script>

<style lang="scss" scoped>
    .hi-empty {
        display: var(--hi-empty-display, flex);
        flex-direction: var(--hi-empty-flex-direction, column);
        align-items: var(--hi-empty-align-items, center);
        justify-content: var(--hi-empty-justify-content, center);
        height: var(--hi-empty-height, 500rpx);
        color: var(--hi-empty-color, var(--hi-color-light));
        font-size: var(--hi-empty-font-size, 24rpx);
        gap: var(--hi-empty-gap, 10px);
        background: var(--hi-empty-background, transparent);
        border-radius: var(--hi-empty-border-radius, 10px);

        // 图标
        &__icon {
            color: var(--hi-empty-icon-color, inherit);
            font-size: var(--hi-empty-icon-font-size, 100rpx);
        }

        // 按钮
        &__button {
            --hi-button-margin: var(--hi-empty-button-top, 30rpx) 0 0 0;
        }
    }
</style>
